<template>
  <van-loading v-if="isLoading" />
  <van-icon v-else
            @click="addCollectClick"
            :color="value ? '#3296fa':'#777'"
            :name="value ? 'star':'star-o'" />
</template>
<script>
import { addCollect, deleteCollect } from '@/api/article'
export default {
  name: 'CollectArticle',
  props: {
    // 是否收藏了
    value: {
      type: Boolean,
      required: true
    },
    // 文章id
    articleId: {
      type: [Number, String, Object],
      required: true
    }
  },
  data () {
    return {
      isLoading: false // 是否加载中
    }
  },
  methods: {
    // 收藏或取消收藏
    async addCollectClick () {
      this.isLoading = true
      try {
        // 判断行为
        if (this.value) { // 是否收藏
          // 收藏了，要取消
          await deleteCollect(this.articleId)
        } else {
          // 未收藏，要收藏
          await addCollect(this.articleId)
        }
        // 弹框
        this.$toast.success(this.value ? '取消成功' : '收藏成功')
        // 更新视图
        this.$emit('input', !this.value)
      } catch (error) {
        console.dir(error)
        if (error.response.status === 401) {
          // 登录失效或者未登录
          if (this.$store.getters.token) this.$store.commit('setUser', {})
          // 提示一下
          this.$toast.fail('请登录')
          // 跳转
          this.$router.push('/login?url=' + this.$route.path)
        } else {
          this.$toast.fail(this.value ? '取消失败' : '收藏失败')
        }
      }
      this.isLoading = false
    }
  }
}
</script>
<style>
</style>
